<template>
  <div class="main">
    <el-form :model="loginForm" :rules="loginFormRules" class="login-form" ref="loginForm">
      <el-form-item label-width="20%" class="form-item" v-for="item in formList" :label="item.label" :key="item.key" :prop="item.key">
        <el-input
          :class="['login-input', item.key == 'code' ? 'login-code' : '']"
          @keyup.enter.native="loginMethod(loginForm)"
          :prefix-icon="item.icon"
          v-model="loginForm[item.key]"
          clearable
          :placeholder="item.placeholder"
          :show-password="item.type == 'password'">
        </el-input>
        <template v-if="item.key == 'code'">
          <el-image class="login-code-image" :src="codeImage" @click="getCode(2)"></el-image>
        </template>
      </el-form-item>
      <el-form-item class="form-item form-item-btn">
        <div class="login-form-tip">没有账号?立即<router-link to="/register">注册</router-link></div>
        <el-button class="login-btn" type="primary" @click="loginMethod(loginForm)" :loading="loading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validPhone } from '@/utils/validate'
export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('手机号格式不正确!'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!value || value.length < 6) {
        callback(new Error('密码不得少于6位!'))
      } else {
        callback()
      }
    }
    const validateCode = (rule, value, callback) => {
      if (!value || value == '') {
        callback(new Error('验证码不得为空!'))
        return
      }
      if (this.codeSuccess) {
        callback()
        return
      }
      this.checkCode(this.codeId, value, callback)
    }
    return {
      // 登录表单
      loginForm: {},
      // 登录表单验证规则
      loginFormRules: {
        // 手机号
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        // 密码
        password: [{ required: true, validator: validatePassword, trigger: 'blur' }],
        // 验证码
        code: [{ required: true, validator: validateCode, trigger: 'blur' }],
      },
      // 登录表单字段
      formList: [
        // 手机号
        { label: '手机号', type: 'input', key: 'phone', icon: 'el-icon-mobile', placeholder: '请输入手机号' },
        // 密码
        { label: '密码', type: 'password', key: 'password', icon: 'el-icon-lock', placeholder: '请输入密码' },
        // 验证码
        { label: '验证码', type: 'input', key: 'code', icon: 'el-icon-s-claim', placeholder: '请输入验证码' },
      ],
      // 加载中
      loading: false,
      // 验证码图片
      codeImage: '',
      // 验证码id
      codeId: '',
      // 验证码是否正确
      codeSuccess: false,
    }
  },
  created() {
    this.getCode(2)
  },
  methods: {
    // 登录
    loginMethod(form) {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', form)
            .then((response) => {
              if (response.success) {
                this.$router.push(`/`)
              }

              this.loading = false
            })
            .catch((error) => {
              this.loading = false
              this.codeSuccess = false
              this.getCode(2)
            })
        }
      })
    },
    // 获取验证码
    getCode(type) {
      this.$store.dispatch('user/getCaptcha', type).then((response) => {
        this.codeImage = response.other.image
        this.codeId = response.data
      })
    },
    // 验证码校验
    checkCode(uid, code, callback) {
      this.$store
        .dispatch('user/checkCaptcha', { uid: uid, code: code })
        .then((response) => {
          this.codeSuccess = true
          callback()
        })
        .catch((error) => {
          callback(new Error('验证码错误!'))
          this.getCode(2)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  background-size: 100% !important;
  background: url(~@/assets/login/bg.jpg) no-repeat;
  overflow: hidden;
  .login-form {
    width: 40%;
    border: 1px gray solid;
    background-color: rgba($color: #2d3a4b, $alpha: 1);
    border-radius: 1rem;
    height: 25rem;
    margin-left: 30%;
    margin-top: 20%;
    .form-item {
      margin-top: 3rem;
      ::v-deep .el-form-item__content {
        height: 2.5rem;
      }
      .login-input {
        width: 80%;
        display: block;
      }
      .login-code {
        width: 50%;
        float: left;
      }
      ::v-deep.el-image {
        height: 2.5rem;
        float: left;
        width: 30%;
        img {
          width: 100%;
          height: 2.5rem;
        }
      }
      .login-btn {
        width: 70%;
        margin: 0 10%;
      }
    }
    .form-item-btn {
      text-align: center;
      .login-form-tip {
        color: #fff;
        a {
          color: #fa8c35;
        }
      }
    }
  }
}
</style>
